<template>
  <div class="store-container">
    <el-row :gutter="20">
      <!-- 分店列表 -->
      <el-col v-for="(store, index) in stores" :key="store.id" :span="5" class="store-col">
        <el-card class="store-card" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1">
          <!-- 删除按钮 -->
          <div v-show="hoverIndex === index" class="delete-btn" @click.stop="handleDelete(store)">
            <el-icon>
              <Close />
            </el-icon>
          </div>

          <div class="card-content">
            <div class="placeholder-content">
              <img :src="`http://${store.shop_url}`" :alt="store.shop_name">
            </div>

            <div class="name-footer">
              <span class="store-name">{{ store.shop_name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 添加按钮 -->
      <el-col :span="5" class="store-col">
        <el-card class="add-card" shadow="hover">
          <el-button type="primary" plain icon="Plus" @click="showCreateDialog" class="add-button">
            + 添加店铺
          </el-button>
        </el-card>
      </el-col>
    </el-row>

    <!-- 创建店铺组件 -->
    <CreateShop ref="createShopRef" @shop-added="handleShopAdded" />
  </div>
</template>

<script setup lang="ts" name="shopManage">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import CreateShop from '@/components/CreateShop.vue'
import instance from '@/api'

interface Store {
  id: number
  shop_name: string
  shop_url: string
}

// 分店数据
const stores = ref<Store[]>([])

// 当前悬停的卡片索引
const hoverIndex = ref(-1)

// 创建店铺组件引用
const createShopRef = ref()

// 显示创建店铺弹窗
const showCreateDialog = () => {
  createShopRef.value?.show()
}

// 处理店铺添加
const handleShopAdded = (shop: { id: number, name: string, image: string }) => {
  stores.value.push({
    id: shop.id,
    shop_name: shop.name,
    shop_url: shop.image
  })
}

// 删除店铺
const handleDelete = (store: Store) => {
  const { id, shop_url } = store
  ElMessageBox.confirm('确定要删除该店铺吗？', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const resp = await instance.delete(`/api/shop/deleteShop/${id}`, { params: { imgUrl: shop_url } })
    ElMessage.success(resp.data)
    stores.value = stores.value.filter(store => store.id !== id)
  }).catch(() => { })
}

onMounted(async () => {
    const resp = await instance.get('api/shop/getList')
    stores.value.push(...resp.data)
})
</script>

<style scoped>
/* 新增删除按钮样式 */
.delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s;
}

.delete-btn:hover {
  background: #f56c6c;
  color: white;
}

.delete-btn .el-icon {
  font-size: 14px;
}

:deep(.el-card__body) {
  padding: 0;
}

.store-container {
  padding: 20px;
}

.store-col {
  margin-bottom: 20px;
}

.store-card {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.placeholder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px; /* 保持和 .store-card 一致 */
  background: #f0f2f5;
  overflow: hidden;
}

.placeholder-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.name-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  color: white;
  display: flex;
  align-items: center;
  min-height: 48px;
}

.store-name {
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  word-break: break-all;
}

.add-card {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dcdfe6;
  background: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s;
}

.add-card:hover {
  border-color: #409eff;
  background: #ecf5ff;
}

.add-button {
  width: 80%;
  height: 100%;
  border: none;
  font-size: 14px;
  color: #606266;
}

.add-button:hover {
  color: white;
}
</style>